<template>
  <el-dialog title="管理信息类型" v-model="dialogVisible" @close="dialogFormVisible" width="800px"
    :close-on-click-modal="false" :close-on-press-escape="false">
    <el-button type="primary" @click="showAdd('add')">添加类型</el-button>
    <el-table :data="types" row-key="type_id" height="100%" stripe :border="true">
      <el-table-column prop="type_name" label="类型名称"></el-table-column>
      <el-table-column prop="type_key" label="类型键"></el-table-column>
      <el-table-column prop="display_order" label="排序"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" @click="showAdd('edit', scope.row)">
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="delInfo(scope.row.type_id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="addTitle" v-model="isAddVisible" @close="closeAdd" width="500px" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form ref="formRef" :model="form" label-width="80px">
        <el-form-item label="类型名称" required>
          <el-input v-model="form.type_name" placeholder="例如：企业简介"></el-input>
        </el-form-item>
        <el-form-item label="类型键" required>
          <el-input v-model="form.type_key" placeholder="例如：company_intro"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.display_order"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button @click="isAddVisible = false">取消</el-button>
          <el-button type="primary" :loading="loading" @click="doSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-dialog>
</template>

<script lang="ts" setup>
import { addModuleTypeAPi, delModuleTypeAPi, editModuleTypeAPi, getTypeListAPi } from "@/api/carfilm/companymodule";
import { ElMessage, ElMessageBox } from "element-plus";
import { inject } from "vue";
import { ref } from "vue";
const addTitle = ref("");
const dialogVisible = ref(false);
const isAddVisible = ref(false);
const types = ref<any[]>([]);
const emits = defineEmits(["done"]);
const form = ref({
  type_id: 0,
  type_name: "",
  type_key: "",
  display_order: 0
});
const formRef = ref<any>(null);
const loading = ref(false);
const dialogFormVisible = () => {
  emits("done");
  dialogVisible.value = false;
};
const open = () => {
  getTypes();
  dialogVisible.value = true;
};
const getTypes = () => {
  getTypeListAPi().then((res: any) => {
    types.value = res.data;
  });
};
const showAdd = (type: string, row?: any) => {
  if (type == "add") {
    addTitle.value = "添加信息类型";
    form.value = {
      type_id: 0,
      type_name: "",
      type_key: "",
      display_order: 0
    };
    isAddVisible.value = true;
  } else {
    addTitle.value = "编辑信息类型";
    form.value = {
      type_id: row.type_id,
      type_name: row.type_name,
      type_key: row.type_key,
      display_order: row.display_order
    };
    isAddVisible.value = true;
  }
};
const closeAdd = () => {
  loading.value = false;
};
function delInfo(id: number) {
  ElMessageBox.confirm("确认要删除该条记录吗?", "警告！", {
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delModuleTypeAPi(id).then((res: any) => {
        getTypes();
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除已取消",
      });
    });
}
const doSubmit = () => {
  formRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      if (form.value.type_id == 0) {
        addModuleTypeAPi(form.value)
          .then((data: any) => {
            ElMessage({
              message: "添加成功",
              type: "success",
            });
            isAddVisible.value = false;
            getTypes();
          })
          .catch(() => {
            loading.value = false;
          });
      } else {
        editModuleTypeAPi(form.value)
          .then((data: any) => {
            ElMessage({
              message: "修改成功",
              type: "success",
            });
            loading.value = false;
            isAddVisible.value = false;
            getTypes();
          })
          .catch(() => {
            loading.value = false;
          });
      }
    }
  });
};
defineExpose({ open });
</script>

<style lang="scss" scoped>
.tip {
  font-size: 14px;
  padding: 10px 0;
}
</style>
